<template>
<div>
    <Form ref="EditForm" :model="FormData"  label-position="top">
        <Row :gutter="16">
            <Col :xs="24" :md="24">
            <FormItem label="名称" prop="ct_title" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                <Input v-model="FormData.ct_title"></Input>
            </FormItem>
            </Col>
            <Col :xs="24" :md="24">
            <FormItem label="自定义系统名称" prop="ct_system_name" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                <Input v-model="FormData.ct_system_name"></Input>
            </FormItem>
            </Col>
            <Col :xs="24" :md="24">
            <FormItem label="标记" prop="ct_sign" :rules="{validator:validataSign,required: true, trigger: 'blur'}">
                <Input v-model="FormData.ct_sign"></Input>
            </FormItem>
            </Col>

            <Col :xs="24" :md="24">
            <FormItem label="所属企业" prop="ct_org_id" :rules="{required: true, type:'number', message:'不能为空', trigger: 'change'}">
                <PartnersSelect :multiple="false"  v-model="FormData.ct_org_id" partnersId="0"    placeholder='请选择'></PartnersSelect>
            </FormItem>
            </Col>

            <Col  :xs="6" :md="6">
            <FormItem label="登录页面背景图(1920x1080)" prop="ct_login_bg">
            <MUpload fileType="img" v-model="FormData.ct_login_bg" action="/base/upload/img">
                <div class="img_b" :style="{'backgroundImage':'url('+FormData.ct_login_bg+')'}"></div>
            </MUpload>
            </FormItem>
            </Col>

            <Col  :xs="6" :md="6">
            <FormItem label="大Logo(190x45)" prop="ct_logo_b">
            <MUpload fileType="img" v-model="FormData.ct_logo_b" action="/base/upload/img">
                <div class="img_b" :style="{'width':'190px','height':'45px','backgroundImage':'url('+FormData.ct_logo_b+')'}"></div>
            </MUpload>
            </FormItem>
            </Col>

             <Col  :xs="6" :md="6">
            <FormItem label="小Logo(190x45)" prop="ct_logo_s">
            <MUpload fileType="img" v-model="FormData.ct_logo_s" action="/base/upload/img" :cropper-size="[190,45]">
                <div class="img_b" :style="{'width':'190px','height':'45px','backgroundImage':'url('+FormData.ct_logo_s+')'}"></div>
            </MUpload>
            </FormItem>
            </Col>

        </Row>
        <Row>
            <Col>
            <FormItem>
                <Button type="primary" @click="handleSubmit()">提交</Button>
                <Button   @click="handleReset()" style="margin-left: 8px">重置</Button>
            </FormItem>
            </Col>
        </Row>

    </Form>
</div>
</template>

<script>

import AppFrame from '../../../libs/app-frame';
import MUpload from "../../../components/m-upload"
import PartnersSelect from "../../../components/partners-select"
export default {
     components: {
        MUpload,PartnersSelect
    },
    data: function() {
        return {
            State: { //数据加载状态
                IsLoadingData: false
            },
            FormData: {
                ct_id:'',
                ct_title:'',
                ct_sign:'',
                ct_system_name:'',
                ct_org_id:0,
                ct_login_bg:'',
                ct_logo_b:'',
                ct_logo_s:''
            },
            Query: {}
        }
    },
    created: function() {
        this.Query = this.$route.query;
        this.getFormData();
    },
    methods: {
        getFormData() {
            let self = this;
            self.State.IsLoadingData = true;
           let postData={
                 id: self.Query.id
            };


            AppFrame.Http.Post("/manage-api/system/custom-theme/login-page/getItem", postData, function(err, ret) {
                self.State.IsLoadingData = false;

                if (ret && ret.Result == 1) {
                   if(ret.Data) self.FormData = ret.Data;

                } else {
                    self.$Message.error(ret.Msg);
                }
            });
        },
        handleSubmit() {

            let self=this;

            self.$refs["EditForm"].validate((valid) => {

                if (valid) {

                    AppFrame.Http.Post("/manage-api/system/custom-theme/login-page/edit",self.FormData,function(err,ret){
                        //console.log(ret);
                        if(ret && ret.Result==1){
                            self.$Message.success('保存成功');
                            self.$router.go(-1);
                        }else{
                            self.$Message.error(ret.Msg);
                        }
                    })
                } else {
                    self.$Message.error('表单验证失败!');
                }
            });
        },
        handleReset() {
            this.$refs["EditForm"].resetFields();
        },

         validataSign:function(rule,value,callback){
            if(value==''){
                callback(new Error('不能为空'));
            }else{
                let postData={
                    IP_ID:this.FormData.IP_ID,
                    IP_Sign:value
                };
                AppFrame.Http.Post("/manage-api/system/custom-theme/login-page/checkSign",postData,function(err,ret){
                    if(ret && ret.Result==1){
                        if(ret.Data.count>0){
                              callback(new Error('已经存在，请更换'));
                        }
                         callback();
                    }
                });
            }
        }
    }
}
</script>

<style scoped>

.img_b{cursor: pointer;width:177px;height: 100px;overflow: hidden;border:dotted 1px #ddd;background-position: center center;background-size:cover}
</style>
